<template>
	<div class="app-container" v-loading="loading" @contextmenu.prevent="">
		<div class="search-container  app_ny">
			<div class="div2" style="position: relative">
				<el-row :gutter="12" style="width: 100%">
					<el-col :span="3">
						<el-input v-model="queryParams.doc_no" placeholder="请输入公文编号" clearable
							@keyup.enter="handleQuery" />
					</el-col>
					<el-col :span="3">
						<el-input v-model="queryParams.title" placeholder="请输入公文标题" clearable
							@keyup.enter="handleQuery" />
					</el-col>
					<el-col :span="6">
						<el-button :loading="loading" type="primary" @click="handleQuery">
							<template #icon><i-ep-search /></template>查询</el-button>
					</el-col>
				</el-row>
				<FilterColumn class="filtBox" @handleRefresh="resetQuery()" :strtype="strtype"></FilterColumn>
			</div>
		</div>
		<el-card shadow="never">
			<div class="action-row">
				<el-button v-hasPerm="['Doc/save']" @click="handleDo('','act_add')" type="primary" plain><template
						#icon><i-ep-plus /></template>新增</el-button>
				<el-button v-hasPerm="['Doc/read']" @click="handleDo('', 'act_info')"
					:disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)"
					plain><template #icon><i-ep-document /></template>详情</el-button>
				<el-button v-hasPerm="['Doc/Prev']" @click="handleDo('', 'act_pre')"
					:disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)"
					plain><template #icon><i-ep-document /></template>预览</el-button>
				<el-button v-hasPerm="['Doc/update']" @click="handleDo('', 'act_edit')"
					:disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)"
					plain><template #icon><i-ep-edit /></template>修改</el-button>
				<el-button v-hasPerm="['Doc/delete']" @click="handleDo('', 'act_del')"
					:disabled="multipleSelection.length !== 1" :type="buttonType(multipleSelection.length)"
					plain><template #icon><i-ep-delete /></template>删除</el-button>
			</div>
			<el-table :key="reload" ref="dataTableRef" v-loading="loading" :data="tableData" align="left" border
				tooltip-effect="dark" :show-overflow-tooltip="true" :scrollbar-always-on="true"
				@cell-mouse-enter="rowMouse" @cell-mouse-leave="menuLineVisible=false"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" align="center" width="55" />
				<el-table-column type="index" label="序号" align="center" width="80" />
				<template v-for="(item,index) in cColumnsList()" :key='index'>
					<el-table-column :label="item.label" :align="item.align" :prop="item.prop" :width="item.width"
						:min-width="item.minwidth">
						<template #default="scope" v-if="item.prop == 'is_check'">
							<el-tag
								:type="titModel[scope.row.is_check].type">{{titModel[scope.row.is_check].title}}</el-tag>
						</template>
						<template #default="scope" v-if="item.prop == 'status'">
							<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
								@change="changeSwitch(scope.row.id,scope.row.status)" />
						</template>
						<template #default="scope" v-if="item.prop == 'level'">
							<el-tag v-if="scope.row.level == 1" type="primary">秘密</el-tag>
							<el-tag v-if="scope.row.level == 2" type="warning">机密</el-tag>
							<el-tag v-if="scope.row.level == 3" type="danger">绝密</el-tag>
							<el-tag v-if="scope.row.level == 0" type="info">未设置</el-tag>
						</template>
					</el-table-column>
				</template>
			</el-table>
			<pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
				v-model:limit="queryParams.limit" @pagination="handleQuery" />
		</el-card>

		<docEdit v-if="dialogAdd.visible" v-model="dialogAdd.visible" :dialogTitle="dialogAdd.title"
			:dialogTableValue="dialogAdd.value" :dialogStatus="dialogAdd.status" :approveList="approveList"
			@initRefreshList="handleQuery"></docEdit>

	</div>


</template>
<script setup lang="ts">
	defineOptions({
		name: "Doc",
		inheritAttrs: false,
	});
	import { useRoute } from 'vue-router';
	import router from '@/router';
	import { useTableFilterStore } from "@/store/modules/tableFilter";
	import docEdit from "./components/docEdit.vue";
	//接口地址
	import {
		deleteDoc,
		getDocList,
		getDocStatus
	} from "@/api/doc";

	//接口地址
	import {
		approveInitInfo
	} from "@/api/approve";

	const TableFilter = useTableFilterStore();
	const strtype = ref('doc')

	// 表格标题
	const cTitles = ["公文编号", "公文标题", "机密程度", "显示", "添加时间", "审核状态"];
	// 显示字段
	const sTitles = ["公文编号", "公文标题", "机密程度", "显示", "添加时间", "审核状态"];
	// 字段属性	
	const cColumns = [
		{ label: "公文编号", prop: "doc_no", align: "center", minwidth: 200 },
		{ label: "公文标题", prop: "title", align: "center", minwidth: 200 },
		{ label: "机密程度", prop: "level", align: "center", minwidth: 150 },
		{ label: "显示", prop: "status", align: "center", minwidth: 150 },
		{ label: "添加时间", prop: "add_time_text", align: "center", minwidth: 150 },
		{ label: "审核状态", prop: "is_check", align: "center", minwidth: 150 },

	]
	interface TableGlobalLocal {
		[key : string] : any; // 或者更具体的类型
	}
	// 列表渲染
	function cColumnsList() {
		const ColumnsList = (TableFilter.tableGlobalLocal as TableGlobalLocal)[strtype.value + '_checklist'];
		if (ColumnsList) {
			const columnMap : any = {}; // 创建一个对象来存储cColumns中label和对象的映射  
			// 预先建立label到对象的映射  
			for (const column of cColumns) {
				columnMap[column.label] = column;
			}
			const newList = [];
			for (const label of ColumnsList) {
				// 尝试从映射中获取对象  
				const foundColumn = columnMap[label];
				if (foundColumn) {
					// 如果找到了，则添加到newList中  
					newList.push(foundColumn);
				}
			}
			return newList;
		}
		else {
			return [];
		}
	};
	// 列表-数据列初始化
	function columnsInit() {
		const dropColStr : string = strtype.value + '_dropCol';
		const checklistStr : string = strtype.value + '_checklist';
		const drop_col : any = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr];
		const checklist = (TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr];
		if (!drop_col) {
			(TableFilter.tableGlobalLocal as TableGlobalLocal)[dropColStr] = JSON.parse(JSON.stringify(cTitles));
			(TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[dropColStr] = JSON.parse(JSON.stringify(cTitles));
		}
		if (!checklist) {
			(TableFilter.tableGlobalLocal as TableGlobalLocal)[checklistStr] = JSON.parse(JSON.stringify(sTitles));
			(TableFilter.tableGlobalLocalTemp as TableGlobalLocal)[checklistStr] = JSON.parse(JSON.stringify(sTitles));
		}
	}



	const queryParamsData = {
		page: 1,
		limit: 20,
		doc_no: "",//公文编号
		title: ""//公文标题
	}
	//搜索-字段配置
	const queryParams = reactive(JSON.parse(JSON.stringify(queryParamsData)));
	const dataTableRef = ref(ElForm);
	const loading = ref(false);
	const total = ref(0);
	const tableData = ref([]);// table表格数据
	const reload = ref();
	const multipleSelection = ref<any>([]);
	const menuLineVisible = ref(true);
	const rowR = ref<any>({});

	const titModel = ref([{
		title: '审核中',
		type: 'info'
	}, {
		title: '已通过',
		type: 'success'
	}, {
		title: '已驳回',
		type: 'danger'
	}])

	const dialogAdd = reactive<any>({
		title: "添加信息", //弹窗标题
		visible: false,   //弹窗显示or隐藏
		status: "add_art", //弹窗状态类型  :添加 add_art 编辑 edit_art 详情 detail_art  
		value: {}   		  //携带整条参数 row
	});

	// 行菜单事件
	function rowMouse(row : any) {
		menuLineVisible.value = true
		rowR.value = row
	}
	// 数据多选事件
	function handleSelectionChange(val : any) {
		multipleSelection.value = val
	}
	// 操作按钮样式
	function buttonType(val : number) {
		if (val === 1) {
			return 'primary'
		} else {
			return 'info'
		}
	}
	// 操作
	function handleDo(row : any, act : string) {
		let uItem = {}
		dialogAdd.status = act
		switch (act) {
			case 'act_add':
				dialogAdd.visible = true;
				dialogAdd.title = '添加信息';
				dialogAdd.value = {};
				break
			case 'act_info':
				uItem = JSON.parse(JSON.stringify(row || multipleSelection.value[0]));
				dialogAdd.visible = true;
				dialogAdd.title = '公文详情';
				dialogAdd.value = uItem;
				break
			case 'act_pre':
				uItem = JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogAdd.visible = true;
				dialogAdd.title = '公文预览';
				dialogAdd.value = uItem;
				break
			case 'act_edit':
				uItem = JSON.parse(JSON.stringify(row || multipleSelection.value[0]))
				dialogAdd.visible = true;
				dialogAdd.title = '修改信息';
				dialogAdd.value = uItem;
				break
			case 'act_del':
				handleDelete(JSON.parse(JSON.stringify(row || multipleSelection.value[0])))
				break
			default:
		}
	}

	// 搜索表单-确认 获取列表文件
	function handleQuery() {
		loading.value = true
		getDocList(queryParams).then((res : any) => {
			tableData.value = res.data.list
			total.value = res.data.count
		}).finally(() => {
			loading.value = false
		})
	}
	// 搜索表单-重置
	function resetQuery() {
		handleQuery();
	}
	/**
	 * 点击-表格-删除 
	 */
	function handleDelete(row : any) {
		const Ids = row.id;
		if (!Ids) {
			ElMessage.warning("请勾选删除项");
			return;
		}
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
		}).then(() => {
			loading.value = true;
			deleteDoc(Ids)
				.then(() => {
					ElMessage.success("删除成功");
					resetQuery();
				})
				.finally(() => (loading.value = false));
		});
	}

	/**
	 * 修改显示状态
	 */
	function changeSwitch(e : number, status : number) {
		getDocStatus({ id: e, status: status }).then((res) => {
			console.log(res)
			ElMessage({ message: res.msg, type: 'success' })
			// handleQuery();
		}).finally(() => { })
	}

	const approveList = ref<any>({ type: 0, rule: [[]] });
	// 获取options 配置项
	function get_options() {
		approveInitInfo({ type: 1 }).then((res) => {
			console.log(res.data.rule)
			if (res.data.status == 1) {
				approveList.value.type = 1
				approveList.value.rule = res.data.rule
			}
			else {
				approveList.value.type = 0
				approveList.value.rule = [{ name: "", user_info: [] }]
			}
		}).finally(() => { })
	}
	onMounted(() => {
		handleQuery();
		columnsInit();
		get_options();
	})
</script>